<template>
    <table border="1px">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>身高</th>
            <th>体重</th>
            <th>操作</th>
        </tr>
        <tr v-for="(item) in arr" :key="item.id">
            <td>{{ item.name }}</td>
            <td>{{ item.age }}</td>
            <td>{{ item.height }}</td>
            <td>{{ item.width }}</td>
            <td><button @click="delet(item.id)">删除</button><button>修改</button></td>
        </tr>
    </table>
    <div>
           姓名：<input type="text" v-model="e">
           年龄：<input type="text" v-model="f">
           身高：<input type="text" v-model="d">
           体重：<input type="text" v-model="g">
           <button @click="add">添加</button>
    </div>
</template>
<script lang="ts">
import { ref } from 'vue';
import { reactive } from 'vue';

export default{
    setup(){
        var arr =reactive([{                          
                id:0,           
                name:'张三',                       
                age:18,       
                height:175,
                width:140    
            },{             
                id:1,             
                name:'李四',                         
                age:16,         
                height:172,
                width:  134               
            },{           
                id:2,          
                name:'王五',                          
                age:17,    
                height:177,
                width: 150     
            }]) 
            let e = ref('')   
            let f = ref('')
            let d = ref('')
            let g = ref('')
            function add(){
                arr.push({
                    id:arr.length,
                    name:e,
                    age:f,
                    height:d,
                    width:g
                })
            }
            function delet(id:number){
            let c = arr.findIndex(item => item.id == id)            
            arr.splice(c,1)
            }  
            return {arr,add,e,f,d,g,delet}      
    }
}



</script>